<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Loading旋转的实现</title>
	</head>
	<style type="text/css">
		*{
			margin:0 auto;
			padding: 0;
		}
		.box{
			width: 30px;
			height: 30px;
			left: 300px;
			top: 50px;
			/* border: 1px red solid; */
			box-sizing: border-box;
			position: absolute;
		}
		.box>p{
			width: 5px;
			height: 5px;
			background-color: black;
			position: absolute;
			border-radius: 50%;
			animation: move 1.5s linear infinite;
		}
		.box>p:nth-of-type(1){
			top: 0 ;
			left: 0;
		}
		.box>p:nth-of-type(2){
			top: 0;
			left:25px;
		}
		.box>p:nth-of-type(3){
			top: 25px;
			left:0;
		}
		.box>p:nth-of-type(4){
			top: 25px;
			left:25px;
		}
		.box:nth-of-type(2){
			transform: rotate(-45deg);
		}
		@keyframes move{
			0%{transform: scale(0);}
			50%{transform: scale(1);}
			100%{transform: scale(2);}
		}
		.box:nth-of-type(1)>p:nth-of-type(1){
			animation-delay: -0.1s;
		}
		.box:nth-of-type(2)>p:nth-of-type(1){
			animation-delay: -0.3s;
		}
		.box:nth-of-type(1)>p:nth-of-type(2){
			animation-delay: -0.5s;
		}
		.box:nth-of-type(2)>p:nth-of-type(2){
			animation-delay: -0.7s;
		}
		.box:nth-of-type(1)>p:nth-of-type(3){
			animation-delay: -0.9s;
		}
		.box:nth-of-type(2)>p:nth-of-type(3){
			animation-delay: -1.1s;
		}
		.box:nth-of-type(1)>p:nth-of-type(4){
			animation-delay: -1.3s;
		}
		.box:nth-of-type(2)>p:nth-of-type(4){
			animation-delay: -1.5s;
		}
	</style>
	<body>
		<div class="box">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
		<div class="box">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>
